<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单变化</title>
    <link rel="stylesheet" href="../css/change.css"/>
</head>
<body>


<!-- 三个圆点放大缩小 -->
<div id="first">
    <div class="first-1"></div>
    <div class="first-2"></div>
    <div class="first-3"></div>
    <div class="first-4"></div>
    <div class="first-5"></div>
</div>

<!-- 十条竖线点放大缩小 -->
<div id="second">
    <div class="second-1"></div>
    <div class="second-2"></div>
    <div class="second-3"></div>
    <div class="second-4"></div>
    <div class="second-5"></div>
    <div class="second-6"></div>
    <div class="second-7"></div>
    <div class="second-8"></div>
    <div class="second-9"></div>
    <div class="second-10"></div>
</div>

<!--两个圆点左右移动并重叠-->
<div id="third">
    <div class="third-1"></div>
    <div class="third-2"></div>
</div>

<!--几个圆点高低起伏-->
<div id="fouth">
    <div class="fouth-1"></div>
    <div class="fouth-2"></div>
    <div class="fouth-3"></div>
    <div class="fouth-4"></div>
    <div class="fouth-5"></div>
    <div class="fouth-6"></div>
    <div class="fouth-7"></div>
    <div class="fouth-8"></div>
    <div class="fouth-9"></div>
</div>

<!-- 三条短横线长短缩变 -->
<div id="five">
    <div class="five-1"></div>
    <div class="five-2"></div>
    <div class="five-3"></div>
</div>

<!-- 九个方块缩变 -->
<div id="six">
    <div class="square clear">
        <div class="six-1 left"></div>
        <div class="six-2 left"></div>
        <div class="six-3 left"></div>
        <div class="six-4 left"></div>
        <div class="six-5 left"></div>
        <div class="six-6 left"></div>
        <div class="six-7 left"></div>
        <div class="six-8 left"></div>
        <div class="six-9 left"></div>
    </div>
</div>

<!-- 九个圆缩变 -->
<div id="seven">
    <div class="circular clear">
        <div class="seven-1 left"></div>
        <div class="seven-2 left"></div>
        <div class="seven-3 left"></div>
        <div class="seven-4 left"></div>
        <div class="seven-5 left"></div>
        <div class="seven-6 left"></div>
        <div class="seven-7 left"></div>
        <div class="seven-8 left"></div>
        <div class="seven-9 left"></div>
    </div>
</div>

<!-- 四条短线偏移 -->
<div id="eight">
    <div class="dis">
        <div class="eight-1"></div>
        <div class="eight-2"></div>
        <div class="eight-3"></div>
        <div class="eight-4"></div>
    </div>
</div>

<!-- 2D按钮 2D按钮 -->
<div>
    <button type="button" class="sure">确定</button>
</div>
</body>
</html>